<template>
  <div class="w-full h-[72px] bg-[var(--headBg)] px-2 flex items-center justify-between">
    <div class="flex flex-1 items-center w-full h-full drag">
      <i
        class="iconfont icon-qiepian rounded-full bg-[var(--text)] text-[var(--contentBg)] py-1 px-2 mx-1"
      ></i>
      <span class="ml-2 text-lg text-[var(--text)] mr-[20px]">梦音阁音乐</span>
      <!--      <div class="ml-[auto] flex items-center drag">-->
      <i class="iconfont icon-a-zuojiantouzhixiangzuojiantou mr-[20px] text-gray-600"></i>
      <i class="iconfont icon-a-youjiantouzhixiangyoujiantou text-gray-600"></i>

      <!--    搜索框    -->
      <search></search>

      <i class="iconfont icon-maikefeng text-gray-600"></i>
    </div>
    <div class="flex-1 ml-2 drag h-full flex items-center">
      <!--  login    -->
      <login></login>
      <div class="relative flex op_btn ml-[auto]">
        <i class="header_icon iconfont icon-tiaoseban"></i>
        <i class="header_icon iconfont icon-shezhi"></i>
        <i class="header_icon iconfont icon-youjian_o"></i>
        <i class="header_icon iconfont icon-qiepian"></i>
        <i class="header_icon iconfont icon-chuangkou" @click="ipcRender('window-change')"></i>
        <i class="header_icon iconfont icon-zuixiaohua" @click="ipcRender('window-min')"></i>
        <i class="header_icon iconfont icon-guanbi" @click="ipcRender('window-close')"></i>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'

import search from '../../base-ui/search/index.vue'
import login from '@/components/login/index.vue'

const ipcRender = (type, params) => {
  console.log(window.electron.ipcRenderer)
  window.electron.ipcRenderer.send(type, params)
}

onMounted(() => {
  document.documentElement.dataset.theme = 's_green'
})
</script>

<style lang="scss" scoped>
.drag {
  -webkit-app-region: drag;

  * {
    -webkit-app-region: no-drag;
  }
}

.op_btn {
  i {
    cursor: pointer;
    margin-right: 1rem;
  }

  i:hover {
    color: var(--text);
  }

  .header_icon {
    padding: 2px 6px;
    border-radius: 50%;
    background-color: var(--headBg);

    &:hover {
      background-color: var(--active);
    }
  }
}
</style>
